<template>
	<div class="quick-foot">
		<!-- 标题 -->
		<div class="quick-foot-title">
			如何在 C2C 快捷交易使用 {{ useCoin }} 
			{{ made == 'pay' ? '购买' : '出售'}}
			{{ coin }}
		</div>
		<!-- 列表 -->
		<div class="quick-foot-list">
			<div v-for="(item, index) in list" :key="index">
				<img :src="item.icon" />
				<p>{{ item.step }}</p>
				<p>{{ item.content }}</p>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>

interface IProps {
	coin: string
	useCoin: string
	list: Array<any>
	made: 'pay' | 'sell'
}

const props = defineProps<IProps>()
</script>
<style lang="scss" scoped>
.quick-foot {
	border: 2px dashed #ccc;
	padding: 60px;
	border-radius: 20px;

	.quick-foot-title {
		font-size: 30px;
		font-weight: bolder;
		text-align: center
	}

	.quick-foot-list {
		display: flex;
		justify-content: space-between;
		margin-top: 60px;

		>div {
			>img {
				width: 68px;
				height: 68px;
			}

			>p:nth-child(2) {
				font-size: 18px;
				color: #000000;
				font-weight: bold;
				margin: 18px 0;
			}

			>p:nth-child(3) {
				font-size: 12px;
				color: #3A3A3A;
			}

		}
	}
}</style>
